<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单相对与绝对定位布局展示</title>
</head>
<body>

    <div id="myArea" style="position:relative;width:528px;height:340px;">
        <img src="1.png">
        <a style="position: absolute; width: 249px; height: 249px; left: 13px; top: 69px;" href="http://baidu.com">锚点A</a>
        <a style="position: absolute; width: 249px; height: 79px; right: 13px; top: 69px;" href="http://baidu.com">锚点B</a>
        <a style="position: absolute; width: 249px; height: 79px; right: 13px; top: 152px;" href="http://baidu.com">锚点C</a>
        <a style="position: absolute; width: 249px; height: 79px; right: 13px; top: 241px;" href="http://baidu.com">锚点D</a>
    </div>
    <!--京东代码太垃圾，不支持这么玩-->
    <!--<map name="image-map">
        <area target="" alt="Hotspot 1" title="Hotspot 1" href="link-to-content-1.html" coords="24,179,267,424" shape="rect">
        <area target="" alt="Hotspot 2" title="Hotspot 2" href="link-to-content-2.html" coords="290,172,333,250" shape="rect">
        <area target="" alt="Hotspot 3" title="Hotspot 3" href="link-to-content-3.html" coords="33,289,270,350" shape="rect">
        <area target="" alt="Hotspot 4" title="Hotspot 4" href="link-to-content-4.html" coords="270,289,333,350" shape="rect">
    </map>-->

</body>
</html>